<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .layuimini-container {
            margin-left: 10px !important;
            margin-top: 5px !important;
        }

        .layui-form-select .layui-edge {
            right: 25px !important;
        }

        .layui-form-pane .layui-form-label {
            width: 100px !important;
        }

        #inline-btn .layui-input-inline {
            width: 120px;
        }

        .layui-form-item {
            margin-bottom: 10px !important;
        }
    </style>
</head>
<body>

<div class="layui-form layuimini-form layui-form-pane">
    <div class="layui-row" style="margin: 0 15px">
        <div class="layui-col-xs4">
            <div class="layuimini-main">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>基本信息</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label required">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="pername" name="pername" lay-verify="required" lay-reqtext="姓名不能为空"
                               placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">身份证号</label>
                    <div class="layui-input-inline">
                        <!--<input type="text" id="IdCard" name="IdCard" lay-verify="identity" lay-reqtext="身份证不正确"-->
                        <!--placeholder="请输入身份证号" value="" class="layui-input">-->
                        <input type="text" id="idcardper" name="idcardper" lay-reqtext="身份证不正确"
                               placeholder="请输入身份证号" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">出生年月</label>
                    <div class="layui-input-inline">
                        <input type="text" id="birthday" name="birthday" lay-verify="required"
                               placeholder="2020-01-01" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">联系电话</label>
                    <div class="layui-input-inline">
                        <input type="text" id="telnum" name="telnum" lay-verify="required|phone"
                               placeholder="请输入电话号码" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <select id="gender" name="gender" lay-verify="required">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </div>
                <!--部门-->
                <div class="layui-form-item" id="CardTypeView"></div>
                <script id="Template" type="text/html">
                    <label class="layui-form-label">{{d.label}}</label>
                    <div class="layui-input-inline">
                        <select id="{{d.name}}" name="{{d.name}}" lay-verify="required" lay-search>
                            {{# layui.each(d.list, function(index, item){ }}
                            <option value="{{item.name}}">{{item.name}}</option>
                            {{# }); }}
                        </select>
                    </div>
                </script>
                <div class="layui-form-item">
                    <label class="layui-form-label">职位</label>
                    <div class="layui-input-inline">
                        <select id="position" name="position" lay-verify="required">
                            <option value="教师">教师</option>
                            <option value="学生">学生</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs5">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>通行区域</legend>
            </fieldset>
            <div id="test7" class="demo-transfer" style="width: 90%;margin: 0 auto; text-align: center"></div>
        </div>
        <div class="layui-col-xs3">
            <div class="layuimini-main">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>人员照片</legend>
                </fieldset>
                <!--隐藏输入框 用来存放上传后图片路径-->
                <input id="credential_hide" name="credentialOne" type="hidden" lay-verify="credentialOne"
                       autocomplete="off" class="layui-input">
                <!--隐藏按钮 上传-->
                <div class="layui-card-body" style="width: 90%;margin: 0 auto; text-align: center">
                    <!--预览图片-->
                    <img id="preview-Img" src="" width="175px" height="235px">
                </div>
                <!--input存照片的base64-->
                <input id="imgdata" name="imgdata" type="hidden" lay-verify="credentialOne"
                       autocomplete="off" class="layui-input">
                <!--图片名-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label required" style="width: 70px!important;text-align: center">路径</label>
                        <div class="layui-input-inline">
                            <input id="fileName" type="text" lay-verify="fileName" autocomplete="off"
                                   class="layui-input" disabled style="width: 110%; text-align: center">
                        </div>
                    </div>
                </div>
                <div style="width: 90%;margin: 0 auto;text-align: center">
                    <button id="upload_img" type="button" hidden="hidden"></button>
                    <button class="layui-btn" id="preview_img" type="button">选择图片</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>其他信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <!--民族-->
                <div class="layui-inline" id="NationView"></div>
                <!--籍贯-->
                <div class="layui-inline" id="NativeView"></div>
                <div class="layui-inline">
                    <label class="layui-form-label">起始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input getTime" id="stime" name="stime"
                               placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input getTime" id="etime" name="etime"
                               placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input type="text" id="address" name="address" autocomplete="off" placeholder="请输入联系地址"
                           class="layui-input"
                           style="margin-left: -10px;width: 99%">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <input type="text" id="notes" name="notes" autocomplete="off" placeholder="请输入备注信息" class="layui-input"
                           style="margin-left: -10px;width: 99%">
                    <input type="hidden" name="pertype" value="1">
                    <input type="hidden" name="usrtype" value="0">
                    <input type="hidden" name="room" value="0">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="inline-btn">
        <div class="layui-input-inline" style="padding-top: 20px;!important;margin-left:30px">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
        </div>
        <div class="layui-input-inline" style="padding-top: 20px;!important;margin: auto">
            <button class="layui-btn layui-btn-primary" onclick="back()">取消</button>
        </div>
        <div class="layui-input-inline" style="padding-top: 20px;!important;float: right">
            <button class="layui-btn" lay-submit lay-filter="saveBtnUp">保存并同步</button>
        </div>
    </div>
</div>
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/lib/layui-v2.5.5/layui.all.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form', 'layer', 'upload', 'laytpl', 'transfer', 'laydate'], function () {
        let $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            laytpl = layui.laytpl,
            laydate = layui.laydate,
            transfer = layui.transfer,
            upload = layui.upload;

        let devices = [[${devices}]];
        //日期时间选择器
        laydate.render({
            elem: '#stime'
            , type: 'datetime'
        });
        //日期时间选择器
        laydate.render({
            elem: '#etime'
            , type: 'datetime'
        });
        transfer.render({
            elem: '#test7',
            parseData: function(res){
                return {
                    "value": res.id, //数据值
                    "title": res.name //数据标题
                }
            },
            data: devices,
            width: 160,
            title: ['可选门禁', '已选门禁'],
            height: 330,
            id: 'key123' //定义唯一索引
        });

        /*上传图片*/
        upload.render({
            elem: '#preview_img'
            , url: '/upload'
            , size: 2048
            , auto: false //不自动上传
            , bindAction: '#upload_img' //上传绑定到隐藏按钮
            , choose: function (obj) {
                let Name = $("#Name").val()
                if (Name == ""){
                    return layer.msg('请先填写姓名');
                }
                this.data = { Name: Name};
                //预读本地文件
                obj.preview(function (index, file, result) {
                    $("#preview-Img").prop("src", result);
                    $('#imgdata').val(result); //隐藏的base64图片输入框赋值
                    $('#fileName').val(file.name);  //展示文件名
                })
            }
            , done: function (res) {
                $('#credential_hide').val(res.msg); //隐藏输入框赋值
                $('#submitForm').click(); //上传成功后单击隐藏的提交按钮
            }
            , error: function (index) {
                layer.msg('上传失败！' + index, {icon: 5});
            }
        });

        //监听提交
        form.on('submit(saveBtnUp)', function (data) {
            data.field.room = JSON.stringify(transfer.getData('key123'));
            console.log(data.field);
            $.ajax({
                url:`/addPersonUp`,
                type:`post`,
                dataType:`json`,
                data: data.field,
                timeout:10000,
                success:function (res) {
                    console.log(res);
                    if (res.code == 200){
                        layer.msg('添加成功');
                        layer.close(layer.index);
                        window.parent.location.reload();
                    }else{
                        layer.msg('添加失败');
                    }
                }
            });
            return false;
        });

        form.on('submit(saveBtn)', function (data) {
            data.field.room = JSON.stringify(transfer.getData('key123'));
            console.log(data.field);
            $.ajax({
                url:`/addPerson`,
                type:`post`,
                dataType:`json`,
                data: data.field,
                success:function (res) {
                    console.log(res);
                    if (res.code == 200){
                        layer.msg('添加成功');
                        layer.close(layer.index);
                        window.parent.location.reload();
                    }else{
                        layer.msg('添加失败');
                    }
                }
            });
            return false;
        });

        /**
         * 封装一个select选择器: selectTemplate(api,name,label,templateId,viewId){};
         * 参数 :
         * 请求地址: api,
         * select的name属性: name,
         * label名字: label
         * 模板id: templateId
         * 视图容器id: viewId
         */
        function selectTemplate(api, name, label, templateId, viewId) {
            $.get(api, function (res) {
                console.log(res);
                let list = {
                    "name": name,
                    "label": label,
                    "list": [{"value": '', "name": "请选择"}]
                };
                if (res.data != null) {
                    list = {
                        "name": name,
                        "label": label,
                        "list": res.data
                    };
                }
                let getTpl = document.getElementById('' + templateId + '').innerHTML;
                let view = document.getElementById('' + viewId + '');
                laytpl(getTpl).render(list, function (html) {
                    view.innerHTML = html;
                });
                form.render('select');
            });
        }

        /**
         * 封装一个select选择器: selectTemplate(data, templateId, viewId);
         * 参数 :
         * 数据：data
         * 名称：name
         * 标签：label
         * 模板id: templateId
         * 视图容器id: viewId
         */
        function selectTemplateUrl(data, name, label, templateId, viewId) {
            let list = {"name": name, "label": label,"list":data};
            let getTpl = document.getElementById('' + templateId + '').innerHTML;
            let view = document.getElementById('' + viewId + '');
            laytpl(getTpl).render(list, function (html) {
                view.innerHTML = html;
            });
            form.render('select');
        }

        $(document).ready(function () {
            let departments = [[${departments}]];
            let faceinfo = [[${faceinfo}]];
            console.log(departments);
            console.log(devices);
            console.log(faceinfo);
            //加载部门选择框
            selectTemplateUrl(departments, "idcardNum", "部门", "Template", "CardTypeView");
            //加载民族选择框
            selectTemplate('/api/Nation.json', "nation", "民族", "Template", "NationView");
            //加载省份选择框
            selectTemplate('/api/Native.json', "place", "籍贯", "Template", "NativeView");

            if (faceinfo !=null){
                $("#pername").val(faceinfo.pername);
                $('#idcardNum').val(faceinfo.idcardNum);
                $('#idcardper').val(faceinfo.idcardper);
                $('#imgdata').val(faceinfo.imgdata);
                $('#preview-Img').val(faceinfo.imgdata);
                $('#stime').val(faceinfo.stime);
                $('#etime').val(faceinfo.etime);
                $('#pertype').val(faceinfo.pertype);
                $('#usrtype').val(faceinfo.usrtype);
                $('#gender').val(faceinfo.gender);
                $('#birthday').val(faceinfo.birthday);
                $('#nation').val(faceinfo.nation);
                $('#telnum').val(faceinfo.telnum);
                $('#place').val(faceinfo.place);
                $('#position').val(faceinfo.position);
                $('#address').val(faceinfo.address);
                $('#notes').val(faceinfo.notes);
            }
        });

        window.back = function () {
            let iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        }
    });
</script>
</body>
</html>